import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View } from '@tarojs/components'
import { AtButton, AtInput, AtTextarea } from 'taro-ui'
import { applyRefund } from '@/api/order'
import './index.scss'

type State = {
  refundReason: any
  linkman: string
  mobile: string
}
export default class Index extends Component {
  $instance = getCurrentInstance();
  constructor(props) {
    super(props)
    this.state = {
      refundReason: '',
      linkman: '',
      mobile: ''
    }
  }
  state: State
  UNSAFE_componentWillMount() { }
  componentDidMount() {}
  UNSAFE_componentWillReceiveProps(nextProps) {}
  changeRefundReason(value) {
    this.setState({
      refundReason: value
    })
  }
  changeLinkMan(value) {
    this.setState({
      linkman: value
    })
  }
  changeMobile(value) {
    this.setState({
      mobile: value
    })
  }
  async handleSubmit() {
    let { refundReason, linkman, mobile } = this.state
    if (refundReason.trim().length < 3) {
      Taro.showToast({
        icon: 'none',
        title: '退款原因至少输入3个文字'
      })
      return
    }
    if (linkman.trim().length < 1) {
      Taro.showToast({
        icon: 'none',
        title: '请输入联系人'
      })
      return
    }
    if (mobile.trim().length < 6) {
      Taro.showToast({
        icon: 'none',
        title: '请正确输入联系方式'
      })
      return
    }
    let { orderNumber } =  this.$instance.router.params
    try {
      Taro.showLoading({
        title: '退款申请中'
      })
      let res = await applyRefund({
        orderNumber,
        refundReason: refundReason.replace(/[\r\n]/g, '').replace(/\s+/g, ''),
        linkman,
        mobile,
				clientSource: process.env.TARO_ENV === 'weapp' ? 0 : 9
      })
      // console.log(res)
      if (!res.data.success) throw Error()
      // console.log(res)
      Taro.redirectTo({
        url: '/pages/order/refund/index?refundApplyNumber=' + res.data.data.refundApplyNumber + '&orderNumber=' + orderNumber
      })
    } catch (error) {
      Taro.showToast({
        icon: 'none',
        title: '退款申请失败，请稍后重试'
      })
    } finally {

    }
  }
  render() {
    return <View className='apply'>
      <View className='context'>
        <View className='p'>1. 限时特价、活动等购买优惠可能一并取消。</View>
        <View className='p'>2. 订单一旦取消，无法恢复。</View>
        <View className='p'>3. 红包、卡券、余额等将原路返还。</View>
      </View>
      <View className='form-wrap'>
        <View className='form-item'>
          <View className='title'>*退款原因：</View>
          <AtTextarea
            value={this.state.refundReason}
            onChange={(val) => this.changeRefundReason(val)}
            maxLength={30}
            showConfirmBar
            placeholder='吐露一下心声(至少输入3个文字哦)...'
          />
        </View>
        <View className='form-item'>
          <AtInput
            name='refundReason'
            title='*退款联系人：'
            type='text'
            placeholder='请输入联系人'
            value={this.state.linkman}
            onChange={this.changeLinkMan.bind(this)}
          />
        </View>
        <View className='form-item'>
          <AtInput
            name='mobile'
            border={false}
            title='*联系方式：'
            type='phone'
            placeholder='请输入联系方式'
            value={this.state.mobile}
            onChange={this.changeMobile.bind(this)}
          />
        </View>
      </View>
      <View className='button-position'><AtButton onClick={this.handleSubmit.bind(this)} type='primary'>提交</AtButton></View>
    </View>
  }
}
